﻿<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>E人一铺</title>
		<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-sca le=1.0' />
		<link rel="stylesheet" href="css/swiper.min.css" />
		<link rel="stylesheet" href="css/animate.min.css" />
		<link rel="stylesheet" href="css/index.css" />
		<script src="js/swiper.min.js"></script>
		<script src="js/swiper.animate.min.js"></script>

		<!--<link rel="stylesheet" href="/dist/css/swiper.min.css">
<link rel="stylesheet" href="/dist/css/animate.min.css">
<script src="/dist/js/swiper.min.js"></script>
<script src="/dist/js/swiper.animate.min.js"></script>-->

		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			html,
			body {
				height: 100%;
			}
			
			body {
				font-family: "microsoft yahei";
			
			}
			
			.swiper-container {
				/*  width: 320px;
    height: 480px;*/
				width: 100%;
				height: 100%;
				background: #000;
			}
			
			.swiper-slide {
				width: 100%;
				height: 100%;
				background: url(images/3.jpg) no-repeat;
				background-size: 100% 100%;
				
			}
			
			img {
				display: block;
			}
			
			.swiper-pagination-bullet {
				width: 6px;
				height: 6px;
				background: #fff;
				opacity: .4;
			}
			
			.swiper-pagination-bullet-active {
				opacity: 1;
			}
			
			@-webkit-keyframes start {
				0%,
				30% {
					opacity: 0;
					-webkit-transform: translate(0, 10px);
				}
				60% {
					opacity: 1;
					-webkit-transform: translate(0, 0);
				}
				100% {
					opacity: 0;
					-webkit-transform: translate(0, -8px);
				}
			}
			
			@-moz-keyframes start {
				0%,
				30% {
					opacity: 0;
					-moz-transform: translate(0, 10px);
				}
				60% {
					opacity: 1;
					-moz-transform: translate(0, 0);
				}
				100% {
					opacity: 0;
					-moz-transform: translate(0, -8px);
				}
			}
			
			@keyframes start {
				0%,
				30% {
					opacity: 0;
					transform: translate(0, 10px);
				}
				60% {
					opacity: 1;
					transform: translate(0, 0);
				}
				100% {
					opacity: 0;
					transform: translate(0, -8px);
				}
			}
			
			.ani {
				position: absolute;
			}
			
			.txt {
				position: absolute;
			}
			
			#array {
				position: absolute;
				z-index: 999;
				-webkit-animation: start 1.5s infinite ease-in-out;
			}
			
		</style>
	</head>

	<body>
		<div class="swiper-container">
			<div class="swiper-wrapper">
				    <!--<section class="swiper-slide swiper-slide1" style="background:url(images/1.png) no-repeat; background-size:100% 100%;">
					<img src="images/4.png" class="ani resize" style="width:205px;height:100px;left:65px;top:30px;z-index:3;" swiper-animate-effect="zoomIn" swiper-animate-duration="1.2s" swiper-animate-delay="0s" />
					<img src="images/3.png" class="ani resize" style="width: 110px;height:250px;left: 38px; top: 212px; z-index: 2;" swiper-animate-effect="zoomIn" swiper-animate-duration="1.2s" swiper-animate-delay="0s" />
					<img src="images/2.png" class="ani resize" style="width: 120px;height:250px;left: 18px; top:  220px; z-index: 2;" swiper-animate-effect="zoomIn" swiper-animate-duration="1.2s" swiper-animate-delay="0s" />
					<div class="z-right-size ani resize" style="width:129px; height:42px; left:177px; top:223px;">
						<div style=" margin-top:1rem; font-size:0.75rem;">LV1一见钟情 &nbsp;98</div>
					</div>
					<div class="z-right-size ani resize" style="width:129px; height:42px; left:177px; top:268px;">
						<div style=" margin-top:1rem; font-size:0.75rem;">LV1一见钟情 &nbsp;98</div>
					</div>
					<div class="z-right-size ani resize" style="width:129px; height:42px; left:177px; top:313px;">
						<div style=" margin-top:1rem; font-size:0.75rem;">LV1一见钟情 &nbsp;98</div>
					</div>
					<img class="z-bs" re src="images/5.gif" />
				</section>-->
                <section class="swiper-slide swiper-slide1" style="background:url(images/8.jpg) no-repeat; background-size:100% 100%;">
					<img src="images/7.png" class="ani" style=" height:24rem; width:20rem;left:0px; top:0px;z-index:3;" swiper-animate-effect="zoomIn" swiper-animate-duration="1.2s" swiper-animate-delay="0s" />
					
                    <div class="ani"  style="width:12rem;height:12rem; border-radius:50%; background:rgba(0,0,0,.6);left:4rem;top:4rem;z-index:3;"></div>
                    <img src="images/4.png" class="ani" style="width:10rem;height:6rem;left:5rem;top:7rem;z-index:3;" swiper-animate-effect="zoomIn" swiper-animate-duration="1.2s" swiper-animate-delay="0s" />
					<div class="ani z-money" style="top:22rem; width:100%; z-index: 6;">
                    	<span>98</span>
                    	<span>155</span>
                    	<span>330</span>
                    </div>
                    <div class=" z-money2">
                    	<span>LV1<br />一见钟情</span>
                    	<span>LV2<br />手足情深</span>
                    	<span>LV3<br />君子之交</span>
                    </div>
                    <img class="z-jp" src="images/6.gif"/>
                </section>

			</div>
			<img src="images/arrow.png" style="width:20px;height:15px; top:460px; left:150px;" id="array" class="resize">

		</div>
		<script>
			document.getElementsByTagName("html")[0].style.fontSize = document.documentElement.clientWidth / 20 + "px";
			scaleW = window.innerWidth / 320;
			scaleH = window.innerHeight / 480;
			var resizes = document.querySelectorAll('.resize');
			for (var j = 0; j < resizes.length; j++) {
				resizes[j].style.width = parseInt(resizes[j].style.width) * scaleW + 'px';
				resizes[j].style.height = parseInt(resizes[j].style.height) * scaleH + 'px';
				resizes[j].style.top = parseInt(resizes[j].style.top) * scaleH + 'px';
				resizes[j].style.left = parseInt(resizes[j].style.left) * scaleW + 'px';
			}
			var mySwiper = new Swiper('.swiper-container', {
				direction: 'vertical',
				pagination: '.swiper-pagination',
				//virtualTranslate : true,
				mousewheelControl: true,
				onInit: function(swiper) {
					swiperAnimateCache(swiper);
					swiperAnimate(swiper);
				},
				onSlideChangeEnd: function(swiper) {
					swiperAnimate(swiper);
				},
				onTransitionEnd: function(swiper) {
					swiperAnimate(swiper);
				},
				watchSlidesProgress: true,
				onProgress: function(swiper) {
					for (var i = 0; i < swiper.slides.length; i++) {
						var slide = swiper.slides[i];
						var progress = slide.progress;
						var translate = progress * swiper.height / 4;
						scale = 1 - Math.min(Math.abs(progress * 0.5), 1);
						var opacity = 1 - Math.min(Math.abs(progress / 2), 0.5);
						slide.style.opacity = opacity;
						es = slide.style;
						es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = 'translate3d(0,' + translate + 'px,-' + translate + 'px) scaleY(' + scale + ')';
					}
				},
				onSetTransition: function(swiper, speed) {
					for (var i = 0; i < swiper.slides.length; i++) {
						es = swiper.slides[i].style;
						es.webkitTransitionDuration = es.MsTransitionDuration = es.msTransitionDuration = es.MozTransitionDuration = es.OTransitionDuration = es.transitionDuration = speed + 'ms';
					}
				},
			})
		</script>
	</body>

</html>